<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css"/>
    <script src="../static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">洗车店系统客户端</div>
        <ul class="layui-nav layui-layout-left">   </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;" th:text="|用户${session.custom?.name}|"></a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="javascript:openUser()">基本资料</a>
                    </dd>
                    <dd>
                        <a href="javascript:openPass()">修改密码</a>
                    </dd>
                    <dd>
                        <a href="javascript:openVip()">账户充值</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:logout()">注销</a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" >
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">基本信息</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;"
                               data-url="/record/selectByCustomId"
                               class="site-demo-active">个人消费记录</a>
                        </dd>
                        <dd>
                            <a href="javascript:;"
                               data-url="/record/selectByLoginCustom"
                               class="site-demo-active">服务项目</a>
                        </dd>

                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">评论区</a>
                    <dl class="layui-nav-child">

                        <dd>
                            <a href="javascript:;"
                               data-url="/comment/selectByPageCustom"
                               class="site-demo-active">服务点评</a>
                        </dd>

                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body"><!-- 内容主体区域 -->
        <iframe name="rightframe" width="99%" height="97%" src="/toInitCustomIndex"></iframe>
    </div>
    <div class="layui-footer">当前用户: 客户</div>
</div>
<script type="text/javascript">
    var $ = layui.jquery;
    var layer = layui.layer;
    var element = layui.element;
    $('.site-demo-active').click(function() {
        window.open($(this).data('url'), "rightframe");
    });
    element.render();// element.init();
    function openURL(url){
        window.open(url, "rightframe");
    }

    function openUser(){
        layer.open({
            shade: [0.8, '#393D49'],
            area:['500px','500px'],
            shadeClose: true, // 点击遮罩区域，关闭弹层
            maxmin: true, // 允许全屏最小化
            title:'个人资料',
            type: 2,
            anim: 2, // 0-6 的动画形式，-1 不开启
            content: '/custom/toCustomInformation' //这里content是一个URL
        });
    }

    function openPass(){
        layer.confirm(
            '您确认要修改密码么',
            {icon:3},
            function(index) {
                layer.close(index);
                layer.open({
                    type: 1,
                    shade: [0.8, '#393D49'],
                    area:['500px','300px'],
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    title:'修改密码',
                    anim: 2, // 0-6 的动画形式，-1 不开启
                    content: '<style>\n' +
                        '        .layui-input-block{\n' +
                        '            margin-left: 50px;\n' +
                        '        }\n' +
                        '    </style>'+
                        '<form class="layui-form" action="/custom/UpdatePassword" method="post">\n' +
                        '    <div class="layui-form-item">\n' +
                        '        <div class="layui-input-block">\n' +
                        '            <input type="text" name="password" placeholder="请输入旧密码" autocomplete="off"  class="layui-input">\n' +
                        '        </div>\n' +
                        '    </div>\n' +
                        '    <div class="layui-form-item">\n' +
                        '        <div class="layui-input-block">\n' +
                        '            <input type="text" name="password1"  placeholder="请输入新密码" autocomplete="off" class="layui-input">\n' +
                        '        </div>\n' +
                        '    </div>\n' +
                        '\n' +
                        '    <div class="layui-form-item">\n' +
                        '        <div class="layui-input-block">\n' +
                        '            <input type="text" name="password2"  placeholder="再次输入新密码" autocomplete="off" class="layui-input">\n' +
                        '        </div>\n' +
                        '    </div>\n' +
                        '    <div class="layui-form-item">\n' +
                        '        <div class="layui-input-block">\n' +
                        '            <button type="submit" class="layui-btn" >立即修改</button>\n' +
                        '        </div>\n' +
                        '    </div>\n' +
                        '</form>'
                });
            }
        );
    }

    function openVip(){
        layer.open({
            shade: [0.8, '#393D49'],
            area:['500px','700px'],
            shadeClose: true, // 点击遮罩区域，关闭弹层
            maxmin: true, // 允许全屏最小化
            title:'账户充值',
            type: 2,
            anim: 2, // 0-6 的动画形式，-1 不开启
            content: '/custom/toIncreaseMoney' //这里content是一个URL
        });
    }

    function logout() {
        layer.confirm(
            '您确认要退出么',
            {icon:3},
            function() {
                location.href = '/user/logout'
            }
        );
    }

</script>
</body>
</html>